// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'

import MyHome from '@/components/MyHome.vue'
import MyMovie from '@/components/MyMovie.vue'
import MyMusic from '@/components/MyMusic.vue'
import MyAbout from '@/components/MyAbout.vue'

import AboutMe from '@/components/AboutMe.vue'
import AboutYou from '@/components/AboutYou.vue'

import NotFound from '@/components/NotFound.vue'

// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3. 创建路由的实例对象
// const router = new VueRouter(/*一会要写路由的配置*/)
const router = new VueRouter({
  // mode: 'history', // 修改成历史模式
  // linkActiveClass: 'aa', // 超链接的模糊匹配类
  // linkExactActiveClass: 'bb', // 超链接的精确匹配类
  routes: [
    // { path: 'hash地址', component: 组件 }
    { path: '/', redirect: '/home' },
    { path: '/home', name: 'home', component: MyHome },
    {
      path: '/movie/:id/:name',
      name: 'movie',
      component: MyMovie,
      props: true
    },
    { path: '/music', name: 'music', component: MyMusic },
    {
      path: '/about',
      name: 'about',
      redirect: '/about/me',
      component: MyAbout,
      children: [
        // { path: '/about/me', component: AboutMe },
        // { path: '/about/you', component: AboutYou }

        // path如果不是斜线开头，则最终的path是 父path + 子path
        { path: 'me', name: 'me', component: AboutMe },
        { path: 'you', name: 'you', component: AboutYou }
      ]
    },
    { path: '*', component: NotFound }
  ]
})

// 4. 导出路由的实例对象
console.log(router)
export default router
